<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:jsf="http://xmlns.jcp.org/jsf/passthrough"
                template="/WEB-INF/templates/default.xhtml"
                xmlns:o="http://omnifaces.org/ui"
                xmlns:of="http://omnifaces.org/functions">

    <f:metadata>
        <f:viewParam name="codicePacchettoSalvato" value="#{modificaPacchettoBean.codicePacchettoSalvato}" />
        <f:event type="preRenderView" listener="#{modificaPacchettoBean.loadPacchetto()}" />
    </f:metadata>

    <ui:define name="htmlhead">
        <title>Modifica Pacchetto - TravelDream</title>
        <h:outputStylesheet name="lib/themes/default.css" />
        <h:outputStylesheet name="lib/themes/default.date.css" />
        <h:outputStylesheet name="lib/themes/default.time.css" />
    </ui:define>

    <ui:define name="content">

        <header class="container">
            <div class="bg"></div>
            <div class="home-text">
                <h1>#{modificaPacchettoBean.pacchettoOriginale.nome}</h1>
                <p>#{modificaPacchettoBean.pacchettoOriginale.descrizione}</p>
            </div>

            <div class="home-register clear-fix">
                <div>
                    <div class="clear-fix">
                        <div class="data-left">
                            <div>
                                <h:inputText styleClass="js__datepicker" id="data-partenza" jsf:placeholder="Data Partenza" value="#{modificaPacchettoBean.dataPartenza}">
                                    <f:convertDateTime pattern="dd/MM/yyyy" />
                                </h:inputText>
                                <h:message for="data-partenza" />
                            </div>
                        </div>
                        <div class="time-right">
                            <div>
                                <h:inputText styleClass="js__timepicker" id="ora-partenza" jsf:placeholder="Orario"  value="#{modificaPacchettoBean.oraPartenza}">
                                    <f:convertDateTime pattern="HH:mm" timeZone="CET"/>
                                </h:inputText>
                                <h:message for="ora-partenza" />
                            </div>
                        </div>
                    </div>
                    <div class="clear-fix">
                        <div class="data-left">
                            <div>
                                <h:inputText styleClass="js__datepicker" id="data-ritorno" jsf:placeholder="Data Ritorno" value="#{modificaPacchettoBean.dataRitorno}">
                                    <f:convertDateTime pattern="dd/MM/yyyy"/>
                                </h:inputText>
                                <h:message for="data-ritorno" />
                            </div>
                        </div>
                        <div class="time-right">
                            <div>
                                <h:inputText styleClass="js__timepicker" id="ora-ritorno" jsf:placeholder="Orario"  value="#{modificaPacchettoBean.oraRitorno}">
                                    <f:convertDateTime pattern="HH:mm" timeZone="CET"/>
                                </h:inputText>
                                <h:message for="ora-ritorno" />
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </header>

        <o:form includeRequestParams="true">
            <section id="section-personalizza-trasporti">
                <div class="container personalizza-trasporti">
                    <h2>Scegli un trasporto</h2>
                    <h:dataTable styleClass="flat-table" value="#{modificaPacchettoBean.listaTrasporti}" var="trasporto">
                        <h:column>
                            <h:selectOneRadio valueChangeListener="#{modificaPacchettoBean.setSelectedTrasporto}"
                                              onclick="dataTableSelectOneRadio(this);">
                                <f:selectItem itemValue="null" />
                            </h:selectOneRadio>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                Partenza
                            </f:facet>
                            #{trasporto.localitaPartenza}
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                Societa
                            </f:facet>
                            #{trasporto.societa}
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                Tipo
                            </f:facet>
                            #{trasporto.tipoTrasporto}
                        </h:column>
                    </h:dataTable>

                </div>
            </section>

            <section id="section-personalizza-hotels">
                <div class="container personalizza-hotels">
                    <h2>Scegli un hotel</h2>
                    <h:dataTable styleClass="flat-table" value="#{modificaPacchettoBean.listaHotels}" var="hotel">
                        <h:column>
                            <h:selectOneRadio valueChangeListener="#{modificaPacchettoBean.setSelectedHotel}"
                                              onclick="dataTableSelectOneRadio(this);">
                                <f:selectItem itemValue="null" />
                            </h:selectOneRadio>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                Nome
                            </f:facet>
                            #{hotel.nome}
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                Descrizione
                            </f:facet>
                            #{hotel.descrizione}
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                Stelle
                            </f:facet>
                            #{hotel.stelle}
                        </h:column>
                    </h:dataTable>
                </div>
            </section>

            <section id="section-personalizza-escursioni">
                <div class="container personalizza-escursioni">
                    <h2>Scegli le escursioni</h2>
                    <h:dataTable styleClass="flat-table" value="#{modificaPacchettoBean.listaEscursioni}" var="escursione">
                        <h:column>
                            <h:selectBooleanCheckbox value="#{modificaPacchettoBean.escursioniScelte[escursione.codice_escursione]}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                Nome
                            </f:facet>
                            #{escursione.nome}
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                Descrizione
                            </f:facet>
                            #{escursione.descrizione}
                        </h:column>
                    </h:dataTable>
                </div>
            </section>

            <section id="section-salva-personalizzazione">
                <div class="container salva-personalizza">
                    <div class="input-div submit">
                        <h:commandButton class="submit-button" value="Modifica Pacchetto" action="#{modificaPacchettoBean.salvaModifichePacchetto()}"/>
                    </div>
                </div>
            </section>
        </o:form>

    </ui:define>


    <ui:define name="scripts">
        <h:outputScript name="lib/jquery-2.1.0.min.js" />
        <h:outputScript name="lib/picker.js" />
        <h:outputScript name="lib/picker.date.js" />
        <h:outputScript name="lib/picker.time.js" />
        <h:outputScript name="lib/cerca.js" />
        <h:outputScript name="lib/helper.js" />
    </ui:define>

</ui:composition>